<template>
	<view class="">
		<view class="wrap">
			<view class="recom-title">
				<view class="recom-title-p">
					<image src="@/static/images/recom2.png" alt="" style="width: 15px; height: 15px;">
						<p>我的收藏（{{count}}）</p>
				</view>
				<a href="javascript:;" class="edit-btn">批量管理</a>
			</view>
			<view class="recom-list">
				<ul>
					<li v-for="item in resData">
						<i class="pick-btn" :data-id="item.id" @click="get_del"></i>
						<a @click="edit_collection" :data-id="item.id">
							<view class="recom-label">
								<span v-for="items in item.stylename">{{items}}</span>
							</view>
								<image :src=" item.if_synthesis != 1 ? '../../static/images/model.png' :  item.synthesis_url " alt="">
							</black>
						</a>
						<a class="btn123" :style="item.if_synthesis == 1 ? 'display:none': ''" @click="right_now" :data-id="item.id">马上合成</a>
					</li>

				</ul>
			</view>
		</view>

		<view class="edit-bar ft">
			<view class="edit-bar-inner">
				<view class="all-btn">
					<p>全选</p>
				</view>
				<a class="del-btn" @click="del_all">删除</a>
			</view>
		</view>

		<view class="edit-bar-margin ft"></view>
	</view>
</template>

<script>
	import {
		flexible
	} from '@/static/js/flexible.js';
	import {
		jquery
	} from '@/static/js/jquery.js';
	import {
		index
	} from '@/static/js/index.js';
	export default {
		data() {
			return {
				resData: '',
				page: '',
				count: ''
			}
		},
		mounted() {
			$('.edit-btn').click(function() {

				if ($(this).hasClass('on')) {
					$(this).removeClass('on');
					$('.pick-btn').hide();
					$('.edit-bar').animate({
						'bottom': '-100%'
					}, 300);
					$(this).html('批量管理').css({
						color: '#333'
					})
				} else {
					$(this).addClass('on');
					$('.pick-btn').show();
					$('.edit-bar').animate({
						'bottom': 0
					}, 300);
					$(this).html('退出管理').css({
						color: '#f00'
					})
				}

			});



			$('.all-btn').click(function() {

				if ($(this).hasClass('on')) {
					$(this).removeClass('on');
					$('.pick-btn').removeClass('on');
				} else {
					$(this).addClass('on');
					$('.pick-btn').addClass('on');
				}

			});
		},

		/**
		 * 生命周期函数--点击事件集合
		 */
		methods: {
			edit_collection(e) {
				uni.navigateTo({
					url: '/pages/collection/edit?id=' + e.currentTarget.dataset.id
				})
			},
			init() {
				this.resData = []
				this.page = 1
				this.isLoadEnd = false
				this.isLoad = false
				
				this.get_list()
			},
			get_list(){
				if (!this.isLoad && !this.isLoadEnd) {
					this.isLoad = true
					
					var post_data = {
						page: this.page
					}
					
					this.$http({
						url: 'Customizedapi/User/my_collection',
						data: post_data,
						hideLoading: false,
						success: res => {
							this.page++;
							this.count = res.data.count
							var data = res.data.list
							if (data.length > 0) {
								this.resData = this.resData.concat(data)
								this.isLoad = false
							} else {
								this.isLoadEnd = true,
								this.isLoad = false
							}
						}
					})
				}
			},
			del_all() {
				var that = this
				uni.showModal({
					title: '提醒',
					content: '确定要删除该搭配么？',
					success: function(res) {
						if (res.confirm) {
							var arr = []
							$('.recom-list .on').each(function() {
								arr.push($(this).attr("data-id"))
							})

							var post_data = {
								ids: arr
							}
							that.$http({
								url: 'Customizedapi/User/del_collection',
								data: post_data,
								hideLoading: false,
								success: res => {
									if (res.code == 1) {
										uni.showToast({
											title: res.msg,
											duration: 2000,
											mask: true,
											icon: 'success',
										});
										that.init()
									}
								}
							})
						}
					}
				})
			},
			get_del() {
				$('.pick-btn').click(function() {
					$(this).toggleClass('on');
				});
			},
			
			right_now(e){
				var that = this
				
				uni.showModal({
					title: '提醒',
					content: '确定要合成该搭配么？',
					success: function(res) {
						if (res.confirm) {
							var post_data = {
								id: e.currentTarget.dataset.id
							}
							that.$http({
								url: 'Customizedapi/Composite/right_now',
								data: post_data,
								hideLoading: false,
								success: res => {
									that.init()
								}
							})
						}
					},
				})
			},
		
			/**
			 * 页面上拉触底事件的处理函数
			 */
			onReachBottom(e) {
				console.log("--------到底了---------")
				this.get_list()
			},
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			this.init()
		},
		onShow() {
			this.$wechat.share({
				title: "666",
				desc: "精选优质、有价值的好文章，转发给身边的人",  
				img: "http://img.sscai.club/click.jpeg" 
			},'http://www.nnhaoyao.com/h5')
		}
	}
</script>

<style>
	image {
		width: 100%;
		height: 100%;
	}
	
	.btn123 {
		display: block;
		width: 2.3rem;
		height: 0.6rem;
		border-radius: 50rpx;
		background: #0077FF;
		text-align: center;
		line-height: 0.6rem;
		font-size: 16px;
		color: #fff;
		position: absolute;
		bottom: 20px;
		right: 10px;
	}
</style>
